<script setup lang="ts">
import useUserStore from '@/store/user'

const userStore = useUserStore()

const form = ref({
  username: 'admin',
  password: '123456'
})

const loading = ref(false)

const login = async () => {
  loading.value = true
  await userStore.handleLogin(form.value)
  loading.value = false
}
</script>

<template>
  <div class="h-full bg-[url('@/assets/imgs/login_bg.webp')] bg-cover">
    <ElForm
      :model="form"
      label-width="70"
      class="absolute left-1/2 top-1/3 w-[32rem] -translate-x-1/2 transform rounded-lg px-12 pb-8 pt-16 shadow-md backdrop-blur"
      @submit.prevent="login"
    >
      <ElFormItem label="用户名">
        <ElInput v-model.trim="form.username" clearable placeholder="请输入用户名" />
      </ElFormItem>

      <ElFormItem label="密码">
        <ElInput v-model.trim="form.password" type="password" clearable placeholder="请输入密码" />
      </ElFormItem>

      <ElButton type="primary" native-type="submit" :loading="loading" class="w-full"
        >登录</ElButton
      >
    </ElForm>
  </div>
</template>
